<!-- 加油站月度销售趋势 -->
<template>
  <div class="dy-panel">
    <div class="dy-panel-main" style="width: 90vh">
      <div class="dy-panel-header">
        <div class="dy-panel-close" @click="closeCurrent"></div>
      </div>
       <div class="dy-panel-content">
        <contentTitle :title="'加油站月度销售趋势'"></contentTitle>
        <div class="layChart" ref="jyzydxsqsRef"></div>
      </div>

      <div class="layer-bottom">
        <div class="pd_abItems-contain" style="justify-content: left">
          <div class="pd_abItems-main">
            <div v-for="(item,index) in abItems" :class="{'pd_abItem-item':true,'selected':item.clazz === 'selected'}" @click="abItemsClick(item)">{{item.title}}</div>
          </div>
          <div class="block_select_contain">
            <el-cascader :options="selectOptions" :show-all-levels="false" placeholder="请选择服务区"
                         @change="serverHandleChange" v-model="curServer" filterable clearable></el-cascader>
          </div>
          <div class="block_select_contain">
            <el-date-picker style="width: 15vh;"
                v-model="selectXzyf"
                type="month"
                placeholder="选择月份">
            </el-date-picker>
          </div>
          <div class="pd-abItem-search" style="position: relative">
            <button class="pd-abItem-search-btn" @click="search">查询</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import {computed, getCurrentInstance, onMounted, ref} from "vue";
import ContentTitle from "../contentTitle.vue";
import {drawLine} from "../../../util/chartUtil.js";
import {ajaxRequest} from "../../../api/code.js";
const chart = getCurrentInstance().proxy.$echarts

const emit = defineEmits(['closeChild']);
const closeCurrent = function (){
  emit('closeChild')
}

const curServer = ref(""),curFristYear = ref(""),curSecYear = ref("");

//设置服务区下拉框值
const selectOptions = ref([{
  id: 24193,
  value: '河北高速燕赵驿行集团有限公司',
  label: '河北高速燕赵驿行集团有限公司',
  children: [{
    id: 349,
    value: '滦州服务区',
    label: '滦州服务区'
  }, {
    id: 0,
    value: '丰润停车区',
    label: '丰润停车区'
  }]
}])

const serverHandleChange = (selectItem) => {
  curServer.value = selectItem

}


const areacode = ref(null)
const abItems = ref([{title:'综合',clazz:'selected'},{title:'东(南)',clazz:''},{title:'西(北)',clazz:''}])
const abItemsClick = function (item){
  abItems.value.forEach((res,i)=>{
    res.clazz = res.title === item.title?'selected':"";
  })
  if(item.title === '综合'){
    areacode.value = null
  }
  else if(item.title === '东(南)'){
    areacode.value = "01"
  }
  else if(item.title === '西(北)'){
    areacode.value = "02"
  }
}

const selectXzyf = ref()

const search = function (){
  
  refreshData()

}

const jyzydxsqs_legend = ref([`汽油`, `柴油`,`非油品`]);
const jyzydxsqs_x = ref([])
const jyzydxsqs_y_1 = ref([])
const jyzydxsqs_y_2 = ref([])
const jyzydxsqs_y_3 = ref([])

for (let i = 1;i<=31;i++){
  jyzydxsqs_x.value.push(i+'日');
}




const jyzydxsqsRef = ref();
const jyzydxsqsOpt = ref({
  color: ['#5AFFFA', '#F44538','#FF9A2E'],
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: '',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  legend: {
    data: jyzydxsqs_legend,
    right: '3%',
    top: '8%',
    textStyle:{
      color: '#FFFFFF'
    },
    icon:'rect',
    itemWidth: 18,
    itemHeight: 6
  },
  grid: {
    top: '35%',
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data: jyzydxsqs_x.value,
      axisLine: { // 设置轴线样式
        lineStyle: {
          color: 'white' // 设置轴线颜色
        }
      },
      axisTick:{
        show: false
      },
      axisLabel: {
        interval:1,
        rotate: 0,
        textStyle: {
          color: 'white',
          fontSize: 12
        }
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      name: "单位：万元",
      nameTextStyle: {
        color: "#FFF",
        nameLocation: "end",
        padding:[0,0,0,15]
      },
      axisLabel: {
        textStyle: {
          color: 'white'
        }
      },
      axisLine: { // 设置轴线样式
        lineStyle: {
          color: 'white' // 设置轴线颜色
        }
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(127, 127, 127, 1)',
          type: 'dashed',
        }
      },
    }
  ],
  series: [
    {
      name: jyzydxsqs_legend.value[0],
      type: 'line',
      smooth: true,
      lineStyle: {
        width: 3
      },
      showSymbol: true,
      areaStyle: {
        opacity: 0.8,
        color: new chart.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(90,255,250,0.8)'
          },
          {
            offset: 1,
            color: 'rgb(1, 191, 236, 0.1)'
          }
        ])
      },
      emphasis: {
        focus: 'series'
      },
      data: jyzydxsqs_y_1.value
    },
    {
      //yAxisIndex: 1,
      name: jyzydxsqs_legend.value[1],
      type: 'line',
      smooth: true,
      lineStyle: {
        width: 3
      },
      showSymbol: true,
      emphasis: {
        focus: 'series'
      },
      data: jyzydxsqs_y_2.value
    },
    {
      //yAxisIndex: 1,
      name: jyzydxsqs_legend.value[2],
      type: 'line',
      smooth: true,
      lineStyle: {
        width: 3
      },
      showSymbol: true,
      emphasis: {
        focus: 'series'
      },
      data: jyzydxsqs_y_3.value
    }
  ]
});

let jyzydxsqsChart
onMounted(() => {
  jyzydxsqsChart = drawLine(jyzydxsqsRef.value,jyzydxsqsOpt.value);
  getFwqxx()
  selectXzyf.value = new Date();
  refreshData();
})


async function refreshData() {
   //选择时间，格式化
  const yyyy = selectXzyf.value.getFullYear();
  const mm = String(selectXzyf.value.getMonth() + 1).padStart(2, '0'); // 月份需要加1，并且补零
  const queryDate = `${yyyy}-${mm}`;
  const params = {
    month : queryDate,
    compid: curServer.value[1],
    areacode:areacode.value
  }
 
  jyzydxsqs_y_1.value = [null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null]
  jyzydxsqs_y_2.value = [null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null]
  jyzydxsqs_y_3.value = [null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null]

  const res = await ajaxRequest('post', 'getJyzydxsqs', params)

   if (res.data && res.data.qydata && res.data.qydata.length>0) {
    res.data.qydata.forEach((item,index)=>{
      jyzydxsqs_y_1.value[parseInt(item.day)-1] = item.num
    })
  }

  if (res.data && res.data.cydata && res.data.cydata.length>0) {
    res.data.cydata.forEach((item,index)=>{
      jyzydxsqs_y_2.value[parseInt(item.day)-1] = item.num
    })
  }

  if (res.data && res.data.fypdata && res.data.fypdata.length>0) {
    res.data.fypdata.forEach((item,index)=>{
      jyzydxsqs_y_3.value[parseInt(item.day)-1] = item.num
    })
  }
  
  debugger;
  jyzydxsqsOpt.value.series[0].data = jyzydxsqs_y_1.value
  jyzydxsqsOpt.value.series[1].data = jyzydxsqs_y_2.value
  jyzydxsqsOpt.value.series[2].data = jyzydxsqs_y_3.value
  jyzydxsqsChart.setOption(jyzydxsqsOpt.value)
}




/**
 * 获取服务区档案信息
 */
 async function getFwqxx() {
  selectOptions.value[0].children = []
  const result = await ajaxRequest('post', 'getFwqxx', {})
  if (result.data && result.data.length>0) {
    result.data.forEach((item,index)=>{
      selectOptions.value[0].children.push({id:item.id,value:item.id,label:item.compname})
    })
  }
}
</script>

<style scoped>
.dy-panel-main{
  padding:2.5vh;
}

.layer-bottom{
  padding-left:5vh;
  padding-top: 2vh;
  padding-bottom: 1vh;
  border-top: 2px solid #1D4F59;
}

:deep(.el-input__wrapper){
  background-color: transparent !important;
  color: #FFFFFF !important;
  height: 3vh;
  flex-grow: 0.5 !important;
  width: 16.3vh;
  margin-right: 2vh;
}
:deep(.custom-date-picker){
  width: 22vh !important; /* 确保您的样式被应用 */
}
:deep(.el-date-editor .el-range-input){
  color: #FFFFFF !important;
}
:deep(.el-date-editor .el-range-separator){
  color: #FFFFFF !important;
}

</style>